<script>
import { default as load } from './library/load.js';
import classesToKeep from './classesToKeep.js';
import Labels from './Labels.js';

import inceptionv1_mixed3a from "../public/_cache/inceptionv1_mixed3a/inceptionv1_mixed3a.json";
import inceptionv1_mixed3b from "../public/_cache/inceptionv1_mixed3b/inceptionv1_mixed3b.json";
import inceptionv1_mixed4a from "../public/_cache/inceptionv1_mixed4a/inceptionv1_mixed4a.json";
import inceptionv1_mixed4b from "../public/_cache/inceptionv1_mixed4b/inceptionv1_mixed4b.json";
import inceptionv1_mixed4c from "../public/_cache/inceptionv1_mixed4c/inceptionv1_mixed4c.json";
import inceptionv1_mixed4d from "../public/_cache/inceptionv1_mixed4d/inceptionv1_mixed4d.json";
import inceptionv1_mixed4e from "../public/_cache/inceptionv1_mixed4e/inceptionv1_mixed4e.json";
import inceptionv1_mixed5a from "../public/_cache/inceptionv1_mixed5a/inceptionv1_mixed5a.json";
import inceptionv1_mixed5b from "../public/_cache/inceptionv1_mixed5b/inceptionv1_mixed5b.json";

const configs = {
  inceptionv1_mixed3a: inceptionv1_mixed3a,
  inceptionv1_mixed3b: inceptionv1_mixed3b,
  inceptionv1_mixed4a: inceptionv1_mixed4a,
  inceptionv1_mixed4b: inceptionv1_mixed4b,
  inceptionv1_mixed4c: inceptionv1_mixed4c,
  inceptionv1_mixed4d: inceptionv1_mixed4d,
  inceptionv1_mixed4e: inceptionv1_mixed4e,
  inceptionv1_mixed5a: inceptionv1_mixed5a,
  inceptionv1_mixed5b: inceptionv1_mixed5b,
}

export default {
  data() {
    return {
      fingerprint: Math.random() + Date.now(),
    // root: "assets",
      root: "https://storage.googleapis.com/distill-2019-activation-atlas/build",
      id: "inceptionv1",
      labels: Labels.inception,
      layer: 0,
      classFilter: 0,
      filter: 0,
      layout: 0,
      config: null,
      layers: null,
      loading: false,
    };
  },
  onupdate({ changed, current, previous }) {
    if (changed.layer || changed.classFilter || changed.id || changed.layout || changed.filter) {

      const {root, id, layer, classFilter, filter, fingerprint, layout} = this.get();
      this.set({loading: true});
      const config = configs[id];
      this.set({config});
      let flipX = false;
      let flipY = false;

      switch (config.layer[layer]) {
        case "mixed4a":
          flipX = true;
          flipY = true;
          break;
        case "mixed4d":
          flipX = true;
          flipY = false;
          break;
        case "mixed5a":
          flipX = true;
          flipY = false;
          break;
        case "mixed5b":
          flipX = true;
          flipY = false;
          break;
      }

      if (classFilter !== null) {
  
        if (config.class_filter == null) { config.class_filter = "None" }
        if (config.filter == null) { config.filter = "None" }
        if (!Array.isArray(config.grid_size)) { config.grid_size = [config.grid_size] }
        if (!Array.isArray(config.class_filter)) { config.class_filter = [config.class_filter] }
        if (!Array.isArray(config.layer)) { config.layer = [config.layer] }
        if (!Array.isArray(config.layout)) { config.layout = [config.layout] }
        if (!Array.isArray(config.filter)) { config.filter = [config.filter] }

        let gridUrls = config.grid_size.map(g => `${root}/${id}/web/web--grid_size=${g}--layout=${config.layout[layout]}--class_filter=${config.class_filter[classFilter]}--filter=${config.filter[filter]}--layer=${config.layer[layer]}--model=${config.model}--sample_images=${config.sample_images}--sample_type=${config.sample_type}.json`)
        load(gridUrls).then(responses => {
          let layers = Array(responses.length)
          responses.forEach((g, i) => {
            let gridSize = config.grid_size[i];
            let tileSize = config.tile_size;
            let numRows = gridSize / tileSize;
            let t = [...Array(numRows).keys()]
            let ic = [...Array(gridSize).keys()]
            let icons = ic.map(x => Array(gridSize))
            for (const gd of g) {
              
              if (gd.x !== undefined) { gd.grid_x = gd.x }
              if (gd.y !== undefined) { gd.grid_y = gd.y }
              if (gd.n !== undefined) { gd.num_activations = gd.n }
              if (gd.i !== undefined) { gd.top_class_indices = gd.i }
              if (gd.v !== undefined) { gd.top_class_values = gd.v }
              if (gd.f !== undefined) { 
                gd.full_class_values = gd.f 
                gd.full_class_indices = classesToKeep
              }
              // console.log("gridSize", gridSize, gridSize - gd.grid_x, gd.grid_x)
              let x = flipX ? (gridSize - gd.grid_x - 1) : gd.grid_x;
              let y = flipY ? (gridSize - gd.grid_y - 1) : gd.grid_y;
              gd.gx = x / gridSize;
              gd.gy = y / gridSize;
              gd.gw = 1 / gridSize;
              let tileX = Math.floor(gd.grid_x / tileSize);
              let tileY = Math.floor(gd.grid_y / tileSize);
              gd.localX = gd.grid_x % tileSize;
              gd.localY = gd.grid_y % tileSize;
              gd.url = `${root}/${id}/render/render--x=${tileX}--y=${tileY}--tries=${config.tries}--alpha=${config.alpha ? "True" : "False"}--tile_size=${config.tile_size}--whiten=${config.whiten}--steps=${config.steps}--icon_size=${config.icon_size}--grid_size=${gridSize}--layout=${config.layout[layout]}--class_filter=${config.class_filter[classFilter]}--filter=${config.filter[filter]}--layer=${config.layer[layer]}--model=${config.model}--sample_images=${config.sample_images}--sample_type=${config.sample_type}.jpg`
              icons[x][y] = gd
            }
            layers[i] = icons
          })
          this.set({layers, loading: false});
        })
      }
    }     
  }
}
</script>